html, body {
	background: #fff;
	box-shadow: inset 0 0 200px 20px #999;
	margin:0;
	padding:0;
	font-family: 'Dosis', sans-serif;
	font-size:16px;
	color:#333;
	height:100%;
}

p {
		font-family: 'Dosis', sans-serif;
		margin:15px;
		padding-top:0;
	
			}
	
header {
height:26px;
background:#333;
	color:white;
	margin:0px;
	padding:15px;
}


h1 {
	font-size:200%;
	font-weight:100;
}

h2, legend {
	font-size:150%;
}
#container {
	width:960px;
	background:white;
	margin:0 auto 25px;
	padding-bottom:15px;
	display:block;
}
.one-edge-shadow {
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;
}

#main-nav {
	background:#1083E0;
	width:100%;
	margin: 25px auto;
	width:960px;
}
#main-nav ul {
	padding-left:0;
	margin:0;
}
#main-nav li {
	display:inline-block;
	list-style-type:none;
	line-height:24px;
}
#main-nav li a {
	display:inline-block;
	letter-spacing:1px;
	padding:15px 20px;
	text-decoration:none;
	margin:0;
	color:white;
}

#main-nav li a:hover {
	background:#333;
}
#main-nav li:first-child {
	margin:0;
}


#taskNav {
background:#333;
}

a {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}

footer {
	background:#CCC;
	display:inline-block;
	padding: 20px;
	margin:0;
	font-size:smaller;
	width:920px;
	color:white;
}
aside {
	display:block;
	float:left;
	width:258px;
}
aside ul {
	width:260px;
	margin:0;
	padding:0;
}
aside li {
	padding:10px 10px;
	border:1px #efefef solid;
	border-top:none;
	list-style-type:none;
	margin:0;
	text-align:left;
	color:#9D9D9D;
	font-weight:600;
	font-size:80%;
}
aside li:hover {
	background:#CC3;
	color:white;
}
#mainContent {
	padding:25px;
	margin:0px;
	overflow:auto;
}
.crying, .smiling {
	background:red; 
	color:white; 
	font-size:80%; 
	padding:5px; 
	text-align:center
	}
	
	.smiling {
		background:green;
	}
.hidden {
display:none;	
}

progress[value] {
	width:958px;
	float:right;
	position:absolute;
	color: #333;
	height: 20px;
	border: 1px solid #1083E0;
	background: #fff;
		}
		
progress::-webkit-progress-value { background: #1083E0; }
progress::-moz-progress-bar { background: #1083E0; }

progress:not([value]) {
background: #fff;
}

#finalProgress {
	width:375px;
}

#intro {
width:930px;
margin: 25px 15px 15px 15px;
}

.error{
font-size:smaller;
color:red;	
display:inline-block;
	}

.left,{
	float:left;
	}

.right{
	float:right;
	}

.top {
top:0;	
}

.half {
width:445px;
display:inline-block;
	}
	
input.button:hover {
background:#fff;
color:#09C;
}

.red, .green {color:red; padding:0; margin:0; font-weight:bolder;}
.green {color:green;}

#message {
height:24px;
float:right;
padding-bottom:5px;
}



.selectBox {
border: 2px solid #1083E0;
height:280px;
}


.centre {
margin:0 auto;
display:block;
text-align:center;
position:relative;
}

fieldset{
border:1px solid #ccc;
padding:20px;
}

label {
display:inline-block;
}

input[type=submit].btn  {
	width: 390px;
	margin: 10px 0 0 0;
	display:inline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 10px 20px;
	background:#333;
	border: 0px solid #333333;
	-moz-box-shadow:
	0px 3px 3px rgba(000,000,000,0.2),  inset 0px 0px 0px rgba(255,000,217,0);
	-webkit-box-shadow:
	0px 3px 3px rgba(000,000,000,0.2),  inset 0px 0px 0px rgba(255,000,217,0);
	box-shadow:
	0px 3px 3px rgba(000,000,000,0.2),  inset 0px 0px 0px rgba(255,000,217,0);
	text-shadow:
	1px 1px 0px rgba(000,000,000,0.3),  0px 1px 0px rgba(255,255,255,0);
}

input[type=submit].btn:hover  {
		background:#ccc;

}
input[type=text], input[type=password] {
padding:5px;
width:390px;
display:block;
}
#true-falseQuestion, multiple-choiceQuestion, #checkboxQuestion{
	display:none;
}
